const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

// module.exports = (env) => {
//   // env.<VariableName> // CLI中 --env 传入的环境变量，可以传多个 --env production --env VERSION=1.0.0
// };

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  // entry: "./src/index.ts", // 入口文件
  // entry: {
  // index: "./src/index.js",
  // another: "./src/another.js",
  // index: {
  //   import: "./src/index.js",
  //   dependOn: "shared",
  // },
  // another: {
  //   import: "./src/another.js",
  //   dependOn: "shared",
  // },
  // shared: "lodash",
  // main: ["./src/index.js", "./src/another.js"],
  // },
  output: {
    // filename: "main.js",
    // filename: "[name].bundle.js",
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    clean: true, // 每次构建前清空 dist 文件夹
    // publicPath: "/assets/", // 设置公共路径 开发模式下也适用
    // library相关信息不要在开发模式下使用
    // library: "myLibrary", // 打包为一个库 库的名称
    // libraryTarget: "umd", // 设置库的输出格式
    // library: {
    //   name: "myLibrary",
    //   type: "commonjs", // umd 适用于多种环境
    // },
  },
  // 构建时 用externals 选项来排除 lodash 库
  // externals: {
  //   // 排除 lodash 库 不打包到输出文件中
  //   // 要使用myLibrary库时需要又外引入 lodash 库
  //   lodash: {
  //     commonjs: "lodash", // commonjs2 模块
  //     commonjs2: "lodash",
  //     amd: "lodash",
  //     root: "_",
  //   },
  // },
  devtool: "inline-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      title: "Development...",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.png$/,
        type: "asset/resource",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        // include: [
        //   path.resolve(__dirname, "src"), // 只匹配 src 目录下的文件
        // ],
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  // 解析规则
  resolve: {
    extensions: [".tsx", ".ts", ".js"], // 解析模块时的默认扩展名
    symlinks: false, // 禁用符号链接解析
  },
  // 默认适用内存中的文件
  devServer: {
    static: "./dist", // 告诉服务器从哪里提供内容
    hot: true, // 启用热模块替换 默认是开启的
    // devMiddleware: { // webpack-dev-middleware 选项
    //   writeToDisk: true, // 将文件写入磁盘
    // },
  },
  optimization: {
    usedExports: true, // tree shaking 去除未使用的代码
    //   moduleIds: "deterministic", // 确保模块 ID 是确定的，以便在构建之间保持一致
    //   splitChunks: {
    //     cacheGroups: {
    //       vendor: {
    //         test: /[\\/]node_modules[\\/]/,
    //         name: "vendors",
    //         chunks: "all",
    //       },
    //     },
    //   },
    //   // runtimeChunk: "multiple", // 将运行时代码分离到多个文件中
    //   runtimeChunk: "single", // 将运行时代码分离到单独的文件中
  },
};
